<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>焉逢12的博客</title>
		<!-- Bootstrap -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
		<div class="container outSide">
			<div class="row">
				<div class="col-md-6 lNode">
					<img src="" class="img-circle hide" style="display: inline-block;" width="40px" height="40px">
					<input type="button" name="" value="注册" class="btn btn-default btn-info" data-toggle="modal" data-target=".registNode" />
					<p class='hide' style="display: inline-block;">欢迎回来,<a href="" class='btn btn-link' role='button'></a></p>
					<input type="button" name="" value="登陆" class="btn btn-default btn-primary" data-toggle="modal" data-target=".loginNode" />
					<input type="button" style="display: inline-block;" class='btn btn-default btn-primary btn-xs hide btn-textNode'
					 name="" value='发布文章' data-toggle="modal" data-target='.textInNode'>
				</div>
				<div class="col-md-4 col-md-offset-2">
					<form class="form-inline text-right" action="" method="post">
						<div class="form-group">
							<label>搜索文章</label>
							<input type="text" id="" value="" class="form-control" />
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class='container'>
			<table class='table'>
				<thead>
					<tr>
						<td>标题</td>
						<td>发布人</td>
						<td>发布时间</td>
						<td>浏览次数</td>
					</tr>
				</thead>

				<tbody>
					<!--
				          <tr>
				            <td>111</td>
				            <td>111111</td>
				            <td>1111111</td>
				            <td>111111111</td>
				          </tr>
				          -->
				</tbody>
			</table>
		</div>
		<div class="modal fade loginNode" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">登陆</h4>
					</div>
					<div class="modal-body">
						<form action="" method="" class="loginForm">
							<div class="form-group">
								<label>用户名</label>
								<input type="text" id="username" value="" placeholder="用户名" class="form-control" />
							</div>
							<div class="form-group">
								<label>密码</label>
								<input type="password" id="password" value="" placeholder="密码" class="form-control" />
							</div>
							<input type="button" id="signin" value="登陆" class="btn btn-default btn-info" />
							<!-- 				<input type="button" id="signup" value="注册" class="btn btn-default btn-primary"/> -->
						</form>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->

		<div class="modal fade textInNode" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">发布文章</h4>
					</div>
					<div class="modal-body">
						<form>
							<div class='form-group'>
								<label>文章名:</label>
								<input type="" class='form-control form-newsName' name="">
							</div>
							<div class='form-group'>
								<label>文章内容:</label>
								<textarea class="form-control form-inner" ></textarea>
							</div>
							<input type='button' class='btn btn-posted btn-primary btn-default' value='发布文章'>

						</form>
					</div>

				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->

		<div class="modal fade registNode" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">注册</h4>
					</div>
					<div class="modal-body">
						<form action="" method="" class="resForm">
							<div class="form-group user-group">
								<label>用户名:</label>
								<input type="text" id="name" value="" placeholder="用户名" class="form-control" />
							</div>
							<div class="form-group">
								<label>密码:</label>
								<input type="password" id="pwd" value="" placeholder="密码" class="form-control" />
							</div>
							<div class="form-group">
								<label>性别:</label>
							</div>
							<div class="form-group">
								<label class="radio-inline">
									<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="男" checked="checked"> 男
								</label>
								<label class="radio-inline">
									<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="女"> 女
								</label>
								<label class="radio-inline">
									<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="保密"> 保密
								</label>
							</div>
							<div class="form-group">
								<label>头像:</label>
								<input type="file" name="" id="filesNode" value="" />
							</div>
							<div class="form-group">
								<label>QQ:</label>
								<input type="text" id="QQ" value="" placeholder="QQ" class="form-control" />
							</div>
							<input type="button" id="signup" value="注册" class="btn btn-default btn-info" />
						</form>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
		<script type="text/javascript">
			(() => {
				//登陆
				$('#signin').on({
					click() {
						if ($('.loginForm input:eq(0)').val() == '' || $('.loginForm input:eq(1)').val() == '') {
							$('.loginForm .form-group').addClass("has-error");
							return;
						}

						$.ajax({
							'url': 'http://localhost:4000/res/login',
							'type': 'get',
							'data': {
								username: $('.loginForm input:eq(0)').val(),
								password: $('.loginForm input:eq(1)').val()
							},
							success(data) {
								console.log(data);
								if (data.ok == 0) {
									alert(data.msg);
									$('.loginForm .form-group').addClass("has-error");
								} else {
									$('.loginNode').modal('toggle');
									$('.loginForm .form-group').removeClass("has-error");
									$('.outSide p a').html(data.data[0].name);
									// $('.outSide p a').html(data.data[0].name).attr('data-user', data.data[0].name);
									$('.loginForm .form-group input').val('');
									$('.outSide .lNode input').not('.btn-textNode').hide();
									$('.outSide p,.outSide img ,.outSide .btn-textNode').removeClass('hide');
									$('.outSide img').attr('src', data.data[0].img.substring(6));


								}
							}
						})
					}
				})
				//注册
				$('#signup').on({
					'click': function() {
						for (var i = 0; i < $('.resForm .form-group').length; i++) {
							if ($('.resForm .form-group').eq(i).find('input').val() == '') {
								$('.resForm .form-group').eq(i).addClass('has-error')
								console.log("内容不能为空")
								return false
							} else {
								$('.resForm .form-group').eq(i).removeClass('has-error')
								console.log("正常")
							}

						}
						var formNode = new FormData()
						formNode.append('username', $('#name').val())
						formNode.append('password', $('#pwd').val())
						formNode.append('img', filesNode.files[0])
						formNode.append('sex', $('input:radio:checked').val())
						formNode.append('qq', $('#QQ').val())

						var xhr = new XMLHttpRequest()
						xhr.open('post', 'http://localhost:4000/res/resModule', true)
						xhr.send(formNode)
						xhr.onload = () => {
							// console.log(xhr.responseText)
							var json = eval('(' + xhr.responseText + ')');
							if (json.ok == 0) {
								alert(json.msg);
								$('.user-group').addClass('has-error');
							} else {
								alert(json.msg);
								$('.registNode').modal('toggle');
								$('.resForm input').not('input[type="radio"],.btn-info').val('');
								$('input:radio:checked').attr('checked', false);
								inlineRadio1.checked = 'checked';

							}
						}
					}
				})
				//发布文章
				$('.btn-posted').on({
					'click':function(){
						$.ajax({
							url:'http://localhost:4000/res/postedNews',
							type:'get',
							data:{
								// 'user':$('.outSide p a').attr('data-user'),
								'username':$('.outSide p a').html(),
								'newsName':$('.form-newsName').val(),
								'inner':$('.form-inner').val()
							},
							success(data){
								if(data.ok == 0){
									alert(data.msg);
								}
								else{
								// alert(data.msg);
									$('.textInNode').modal('toggle');
								}
							}
						})
					}
				});
			})()
		</script>
	</body>
</html>
